<script setup>
import { ref, onMounted } from 'vue';
import { Picture } from '@element-plus/icons-vue'
const images = [
  { id: 1, title: '好久不见', url: '/placeholder.svg?height=300&width=300' },
  { id: 2, title: '0419随便画画2', url: '/placeholder.svg?height=300&width=300' },
  { id: 3, title: '0419随便画画3', url: '/placeholder.svg?height=300&width=300' },
  { id: 4, title: '0419随便画画4', url: '/placeholder.svg?height=300&width=300' },
  { id: 5, title: '0419随便画画5', url: '/placeholder.svg?height=300&width=300' },
  { id: 6, title: '0419随便画画6', url: '/placeholder.svg?height=300&width=300' },
  { id: 7, title: '0419随便画画7', url: '/placeholder.svg?height=300&width=300' },
  { id: 8, title: '0419随便画画8', url: '/placeholder.svg?height=300&width=300' },
  { id: 9, title: '0419随便画画9', url: '/placeholder.svg?height=300&width=300' },
  { id: 10, title: '0419随便画画10', url: '/placeholder.svg?height=300&width=300' },
  { id: 11, title: '0419随便画画11', url: '/placeholder.svg?height=300&width=300' },
  { id: 12, title: '0419随便画画12', url: '/placeholder.svg?height=300&width=300' },
  { id: 13, title: '0419随便画画13', url: '/placeholder.svg?height=300&width=300' },
  { id: 14, title: '0419随便画画14', url: '/placeholder.svg?height=300&width=300' },
  { id: 15, title: '0419随便画画15', url: '/placeholder.svg?height=300&width=300' },
  { id: 16, title: '0419随便画画16', url: '/placeholder.svg?height=300&width=300' },
  { id: 17, title: '0419随便画画17', url: '/placeholder.svg?height=300&width=300' },
  { id: 18, title: '0419随便画画18', url: '/placeholder.svg?height=300&width=300' },
  { id: 19, title: '0419随便画画19', url: '/placeholder.svg?height=300&width=300' },
  { id: 20, title: '0419随便画画20', url: '/placeholder.svg?height=300&width=300' },
  { id: 21, title: '0419随便画画21', url: '/placeholder.svg?height=300&width=300' },
  { id: 22, title: '0419随便画画22', url: '/placeholder.svg?height=300&width=300' },
  { id: 23, title: '0419随便画画23', url: '/placeholder.svg?height=300&width=300' },
  { id: 24, title: '0419随便画画24', url: '/placeholder.svg?height=300&width=300' },
  { id: 25, title: '0419随便画画25', url: '/placeholder.svg?height=300&width=300' }
];
</script>
<template>
  <div class="Home-page-Gallery">
    <el-card
      v-for="image in images"
      :key="image.id"
      class="image-card"
      :body-style="{ padding: '0px' }"
      shadow="never"
    >
      <div class="card-content">
        <el-image
          :src="image.url"
          fit="cover"
          class="gallery-image"
          loading="lazy"
        >
          <template #placeholder>
            <div class="image-placeholder">
              <el-icon><Picture /></el-icon>
            </div>
          </template>
        </el-image>
        <div class="image-info">
          <span class="image-title">{{ image.title }}</span>
        </div>
      </div>
    </el-card>
  </div>
</template>
<style scoped>
.Home-page-Gallery {
  margin: 0 20vw 20px 20vw;
  height: 100%;
  /* background-color: aqua; */
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;

  .el-card {
    margin: 0 !important;
  }

  :deep(.el-card__body) {
    padding: 0 !important;
  }

  .image-card {
    height: 225px;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease;
    background-color: #2c2c2c;
    border: none;

    &:hover {
      transform: translateY(-5px);
    }

    .card-content {
      display: flex;
      flex-direction: column;
      height: 225px;

      .gallery-image {
        aspect-ratio: 1;
        width: 100%;
        height: 100%;
        object-fit: cover;

        .image-placeholder {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
          background-color: #3c3c3c;
          color: #666;
          font-size: 24px;
        }
      }

      .image-info {
        padding: 5px 0 5px 10px;
        background-color: transparent;

        .image-title {
          color: #fff;
          font-size: 1rem;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>